<template>
	<view class="page" :style="{minHeight:$height()}">
		<view class="contentBox">
			<view class="title">
				请输入反馈的内容
			</view>
			<textarea v-model="content" placeholder="在这里输入......"></textarea>
			<view class="picture">
				<u-upload :action="action" ref="uUpload" :width="135" :height="135" :max-count="5"></u-upload>
			</view>
			<view class="notice">
				*上传照片可以更有效的帮助我们排查问题。
			</view>
		</view>
		<view class="sbt" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 非真实地址
				action: this.$axios.interfaceUrl() + "/upload",
				content: "",
			}
		},
		methods: {
			submit() {
				let imageArr = new Array()
				this.$refs.uUpload.lists.forEach((item, index) => {
					imageArr.push(item.response.data.src)
				})
				this.$axios.request(this.$api.addFeedback, "POST", {
					images: imageArr.join(","),
					content: this.content
				}).then((val) => {
					this.$msg.toastSwitch("提交成功",`/pages/index/index`)
				})

			},
		}
	}
</script>

<style>
	.page {
		width: 100%;
		border-top: 1rpx solid #F3F4F8;
		background-color: #F3F4F8;
	}

	.contentBox {
		width: 100%;
		height: 762rpx;
		background-color: #FFFFFF;
		margin-top: 16rpx;
		padding: 0 32rpx;
		border-top: 1rpx solid #FFFFFF;
	}

	.title {
		width: 100%;
		height: 40rpx;
		margin: 24rpx 0 37rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 46rpx;
		color: #333333;
		opacity: 1;
	}

	textarea {
		width: 100%;
		height: 384rpx;
	}

	.picture {
		width: 100%;
		height: 159rpx;
		margin: 32rpx 0 0;
	}

	.notice {
		font-size: 20rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 46rpx;
		color: #BBBBBB;
		opacity: 1;
	}

	.sbt {
		width: 80%;
		margin-left: 10%;
		height: 64rpx;
		background: #2E6ADF;
		opacity: 1;
		border-radius: 4rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 64rpx;
		color: #FFFFFF;
		text-align: center;
		margin-top: 130rpx;
	}
</style>
